<template>
    <div class="login_bgc">
        <div class="log_box">
            <div class="logo">
                <img src="../assets/img/logo.png" alt="">
            </div>
            <div class="login_input" >
               <el-form label-width="0" class="login_form" ref="ruleForm"  :rules='loginRules' :model="loginForm">
                <el-form-item prop="username">
                    <el-input  prefix-icon="el-icon-user-solid" v-model="loginForm.username" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item  prop="password">
                    <el-input  prefix-icon="el-icon-s-help" v-model="loginForm.password" type="password" placeholder="密码"></el-input>
                </el-form-item>
                <el-checkbox  class="login_checked">记住密码</el-checkbox>
                <el-form-item class="login_btn">
                    <el-button id="login_btn" class="primary" type="primary" @click="login('ruleForm')">登录</el-button>
                    <el-button type="info" @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
         var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                callback();
            }
        };
        return{
            //用户名提示
            loginForm:{
                username:'',
                password:''
            },
            //表单验证
            loginRules:{
                username:[
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password:[
                    { validator: validatePass, trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        login(formName) {
            this.$refs[formName].validate(async valid => {
                if(!valid)return;
                const {data:result} = await  this.$http.post('login',this.loginForm)
                const headerValue = await this.$http.post('login',this.loginForm).then(function(response) {
                    var token = response.headers['x-access-token']
                    sessionStorage.setItem('LoginToken',token)
                });
                if(result.errorCode !== 0){
                    this.$Message.error(`用户登陆失败:请检查您的用户名密码是否正确`)
                }else{
                    this.$Message.success(`欢迎${this.loginForm.username}进入系统，祝您体验愉快`),
                    this.$router.push('/home')
                };
            });
        },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
</script>
<style  scoped>
    .login_bgc{
        background: url('../assets/img/login-bg.jpg') no-repeat;
        background-size:100% 100%;
        height: 100%;
    }
    .log_box{
            width: 450px;
            height: 300px;
            background-color: rgba(0,0,0,0.7);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            border-radius: 5%;
    }
    .logo{
            width: 120px;
            height: 60px;
            border-radius: 5%;
            position: absolute;
            top: 12%;
            left: 50%;
            transform: translate(-50%,-50%);
            border-radius: 5%;
    }
    .logo img{
            width: 100%;
            height: 100%;
    }
    .log_box .login_form{
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0 20%;
        box-sizing: border-box;
        }
    .login_checked{
        color: rgb(56, 163, 119);  
    }
    .primary{
        background-color: rgb(56, 163, 119);
        border-color: rgb(56, 163, 119);
    }
   .login_btn{
       margin-top:3% ;
       display: flex;
       justify-content: center;
   }
</style>